<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>电子钱包后台管理系统</title>


    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">


    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
</head>

<style>
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .bg-style {
        background-color: rgba(255, 255, 255, 0.3);
        margin-top: 120px;
        height: 530px;
        overflow: auto;
    }

    .login-box {
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.322);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        max-width: 400px;
        margin: 30px auto 0;
        backdrop-filter: blur(10px);
    }

    .glyphicon {
        font-size: 20px;
    }


    .login-logo {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }

    .login-box-msg {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
        color: #666;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-control {
        height: 40px;
        border-radius: 5px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    .form-control:focus {
        outline: none;
        border-color: #66afe9;
        box-shadow: 0 0 5px rgba(102, 175, 233, 0.5);
    }

    .form-control-feedback {
        position: absolute;
        top: 20px !important;
        right: 10px;
        transform: translateY(-50%);
        color: #ccc;
    }

    .btn {
        height: 40px;
        border-radius: 5px;
        background-color: #337ab7;
        color: #fff;
        border: none;
        padding: 0 20px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: #286090;
    }

    .phone-login {
        position: absolute;
        right: 0px;
        top: 0px;
        cursor: pointer;
        width: 0;
        height: 0;
        border-radius: 0px 10px 0px 0px;
        border-bottom: 90px solid transparent;
        border-right: 90px solid #f8f2f2b4;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .phone-img {
        width: 50px;
        position: relative;
        top: 8px;
        left: 35px;
    }

    .btn-phone {
        position: absolute;
        right: 15px;
        top: 8px;
        height: 25px;
        border: 1px solid #cad7e2;
        border-radius: 5px;
        color: #757474;
    }

    .btn-phone.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-phone:hover {
        position: absolute;
        right: 15px;
        top: 8px;
        height: 25px;
        border: 1px solid #868686;
        border-radius: 5px;
        color: #1a1919;
    }
</style>

<body style="background-image: url('../img/background.jpg');background-repeat: no-repeat;background-size: cover;">
    <div class="bg-style">
        <div class="login-box">
            <div class="phone-login">
                <div class="phone-top">
                    <img src="../img/phone-login.png" class="phone-img" id="phone-image">
                    <img src="../img/user-login.png" class="phone-img" id="user-image" style="display: none;">
                </div>
            </div>
            <div class="login-logo" style="margin-top: 20px;"> <b>电子钱包</b>后台管理系统 </div>
            <div class="login-box-msg">账号登录</div>
            <div id="password-login">
                <div class="form-group has-feedback" style="position: relative;">
                    <input type="text" class="form-control" name="loginAccount" placeholder="账号" maxlength="11">
                    <span class="glyphicon glyphicon-user form-control-feedback"
                        style="position: absolute; right: 10px; top: 38%; transform: translateY(-50%);"></span>
                    <span class="help-block" style="color: red; display: none;">账号格式不正确</span>
                </div>
                <div class="form-group has-feedback" style="position: relative;">
                    <input type="password" class="form-control" name="loginPassword" placeholder="密码" maxlength="12">
                    <span class="glyphicon glyphicon-lock form-control-feedback"
                        style="position: absolute; right: 10px; top: 38%; transform: translateY(-50%);"></span>
                    <span class="help-block" style="color: red; display: none;">密码长度应为6-12位</span>
                </div>
                <div style="position: relative;" class="form-group has-feedback">
                    <input type="text" class="form-control" placeholder="验证码" id="checkCode" name="checkCode"
                        style="width: 200px;display: inline-block;" maxlength="4">

                    <img src="http://localhost:8080/user/loginController" style="float: right;" id="verifyCodeImg">
                </div>
            </div>

            <div id="phone-login" style="display: none;">
                <div class="form-group has-feedback" style="position: relative;">
                    <input type="text" class="form-control" name="loginPhone" placeholder="手机号" maxlength="11">
                    <span class="glyphicon glyphicon-phone form-control-feedback"
                        style="position: absolute; right: 10px; top: 38%; transform: translateY(-50%);font-size: 25px;"></span>
                    <span class="help-block" style="color: red; display: none;">手机号格式不正确</span>
                </div>
                <div style="position: relative;" class="form-group has-feedback">
                    <input type="text" class="form-control" placeholder="验证码" id="code" name="code" maxlength="4">
                    <button type="button" class="btn-phone disabled" id="sendCodeBtn" disabled>获取验证码</button>
                </div>
            </div>

            <div class="row" id="row1">
                <div class="col-xs-12">
                    <button id="user-login-btn" class="btn btn-primary btn-block">登录</button>
                </div>
                <div class="col-xs-12" style="margin-top: 10px;">
                    <a href="common-forget.html" style="float: right;color: #000;">忘记密码?</a>
                </div>
            </div>

            <div class="row" id="row2" style="display: none;">
                <div class="col-xs-12">
                    <button id="phone-login-btn" class="btn btn-primary btn-block" disabled>登录</button>
                </div>
            </div>
        </div>
    </div>
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/iCheck/icheck.min.js"></script>
    <script>
        $(document).ready(function () {
            // 点击验证码图片时，重新生成验证码图片
            $("#verifyCodeImg").click(function () {
                $(this).attr('src', 'http://localhost:8080/user/loginController?' + Math.random());
            });

            // 切换到手机号登录
            $("#phone-image").click(function () {
                $("#row1").hide();
                $("#password-login").hide();
                $("#phone-image").hide();
                $("#phone-login").show();
                $("#user-image").show();
                $("#row2").show();
                $(".login-box-msg").text("手机号登录")
            })

            // 切换到密码登录
            $("#user-image").click(function () {
                $("#row1").show();
                $("#password-login").show();
                $("#phone-image").show();
                $("#phone-login").hide();
                $("#user-image").hide();
                $("#row2").hide();

                $(".login-box-msg").text("账号登录")
            });


            sendCodeBtn.onclick = function () {

                var phone = $('input[name="loginPhone"]').val();

                getMessage(phone);

            };


        });

        // 发送验证码
        function getMessage(phone) {
            // 发送 AJAX 请求获取数据
            $.ajax({
                url: 'http://localhost:8080/user/sendMessageController?phone=' + phone,
                method: 'get',
                success: function (result) {

                    if (result.code === 200) {
                        var sendCodeBtn = document.getElementById("sendCodeBtn");
                        var countdown = 60; // 倒计时时间

                        if (countdown == 60) { // 只有在倒计时时间为 60 秒时才能发送验证码
                            sendCodeBtn.disabled = true; // 禁用按钮
                            sendCodeBtn.classList.add("disabled"); // 添加 disabled 样式
                            sendCodeBtn.innerHTML = countdown + "s重新发送"; // 显示倒计时时间
                            var timer = setInterval(function () {
                                countdown--;
                                sendCodeBtn.innerHTML = countdown + "s重新发送";
                                if (countdown == 0) {
                                    clearInterval(timer); // 清除计时器
                                    sendCodeBtn.disabled = false; // 恢复按钮可用状态
                                    sendCodeBtn.classList.remove("disabled"); // 移除 disabled 样式
                                    sendCodeBtn.innerHTML = "获取验证码";
                                    countdown = 60; // 重置倒计时时间
                                }
                            }, 1000);
                        }
                        // 获取按钮的 DOM 元素
                        var loginBtn = document.getElementById("phone-login-btn");

                        // 移除按钮的禁用
                        loginBtn.disabled = false;
                    } else if (result.code == 7001) {
                        alert(result.msg)
                    } else {
                        console.log(result.msg);
                    }

                },
                error: function (xhr, status, error) {
                    console.log("请求失败");
                }
            });
        }

        // 手机号登录
        $(function () {
            // 监听手机号输入框失去焦点事件
            $('input[name="loginPhone"]').blur(function () {
                var phone = $(this).val();
                if (!/^1[3456789]\d{9}$/.test(phone)) {
                    // 手机号格式不正确，禁用获取验证码
                    $('#sendCodeBtn').prop('disabled', true);
                    $(this).siblings('.help-block').show();
                    $("#sendCodeBtn").addClass("disabled");
                    $('input[name="loginPhone"]').parent().addClass('has-error');
                } else {
                    // 手机号格式正确，启用获取验证码
                    $('#sendCodeBtn').prop('disabled', false);
                    $(this).siblings('.help-block').hide();
                    $("#sendCodeBtn").removeClass("disabled");
                    $('input[name="loginPhone"]').parent().removeClass('has-error');
                }
            });

            // 监听验证码输入框的输入事件
            $('input[name="code"]').on('input', function () {
                var code = $(this).val();
                if (code.length !== 4) {
                    $('input[name="code"]').parent().addClass('has-error');
                } else {
                    $('input[name="code"]').parent().removeClass('has-error');
                }
            });

            // 监听登录按钮的点击事件
            $("#phone-login-btn").click(function () {
                // 获取手机号和验证码
                var phone = $('input[name="loginPhone"]').val();
                var code = $('input[name="code"]').val();

                // 验证手机号和验证码是否符合格式
                var phoneReg = /^1[3456789]\d{9}$/; // 手机号正则表达式
                var codeReg = /^\d{4}$/; // 验证码正则表达式
                if (!phoneReg.test(phone)) {
                    $('input[name="loginPhone"]').parent().addClass('has-error');
                    $('input[name="loginPhone"]').siblings('.help-block').show();
                    return;
                }
                if (!codeReg.test(code)) {
                    $('input[name="code"]').parent().addClass('has-error');
                    return;
                } else {
                    $('input[name="code"]').parent().removeClass('has-error');
                }


                // 发送 AJAX 请求获取数据
                $.ajax({

                    url: 'http://localhost:8080/user/sendMessageAfterController?phone=' + phone + "&code=" + code,
                    method: 'get',
                    success: function (result) {
                        if (result.code === 200) {
                            console.log(result.msg);

                            console.log(result.datas);
                            localStorage.setItem('token', result.datas.token);
                            localStorage.setItem('longToken', result.datas.longToken);
                            // 判断用户权限是否有5(后端登录权限)
                            var hasPermission = false;

                            if (result.datas.status === 1) {
                                for (var i = 0; i < result.datas.roles.length; i++) {
                                    var role = result.datas.roles[i];
                                    for (var j = 0; j < role.permissions.length; j++) {
                                        var permission = role.permissions[j];
                                        if (permission.permissionId == 5) {
                                            hasPermission = true;
                                            break;
                                        }
                                    }
                                    if (hasPermission) {
                                        break;
                                    }
                                }

                                if (hasPermission) {
                                    // 跳转到common-index首页
                                    window.location.href = 'common-index.html';
                                } else {
                                    // 提示用户没有权限
                                    alert('您没有权限访问该页面');
                                }
                            } else {
                                alert('该账号已被冻结，请联系管理员解冻');
                            }

                        } else {
                            console.log(result.msg);
                        }

                    },
                    error: function (xhr, status, error) {
                        console.log("请求失败");
                    }
                });
            });
        });

        // 账号登陆
        $(function () {

            // 监听账号输入框的失去焦点事件
            $('input[name="loginAccount"]').on('blur', function () {
                var accountReg = /^1[3456789]\d{9}$/; // 手机号正则表达式
                if (!accountReg.test($(this).val())) {
                    $(this).parent().addClass('has-error');
                    $(this).siblings('.help-block').show();
                } else {
                    $(this).parent().removeClass('has-error');
                    $(this).siblings('.help-block').hide();
                }
            });

            // 监听密码输入框的失去焦点事件
            $('input[name="loginPassword"]').on('blur', function () {
                var passwordReg = /^\w{6,12}$/; // 密码正则表达式
                if (!passwordReg.test($(this).val())) {
                    $(this).parent().addClass('has-error');
                    $(this).siblings('.help-block').show();
                } else {
                    $(this).parent().removeClass('has-error');
                    $(this).siblings('.help-block').hide();
                }
            });

            // 监听验证码输入框的失去焦点事件
            $('input[name="checkCode"]').on('blur', function () {
                var codeReg = /^[0-9a-zA-Z]{4}$/; // 验证码正则表达式
                if (!codeReg.test($(this).val())) {
                    $(this).parent().addClass('has-error');
                } else {
                    $(this).parent().removeClass('has-error');
                }
            });


            // 监听登录按钮的点击事件
            $('#user-login-btn').click(function () {
                // 获取账号和密码
                var loginAccount = $('input[name="loginAccount"]').val();
                var loginPassword = $('input[name="loginPassword"]').val();
                var verifyCode = $('input[name="checkCode"]').val();

                // 验证账号和密码格式是否正确
                var accountReg = /^1[3456789]\d{9}$/; // 手机号正则表达式
                var passwordReg = /^\w{6,12}$/; // 密码正则表达式
                var codeReg = /^[0-9a-zA-Z]{4}$/; // 验证码正则表达式
                if (!accountReg.test(loginAccount)) {
                    $('input[name="loginAccount"]').parent().addClass('has-error');
                    $('input[name="loginAccount"]').siblings('.help-block').show();
                    return;
                }
                if (!passwordReg.test(loginPassword)) {
                    $('input[name="loginPassword"]').parent().addClass('has-error');
                    $('input[name="loginPassword"]').siblings('.help-block').show();
                    return;
                }
                if (!codeReg.test(verifyCode)) {
                    $('input[name="checkCode"]').parent().addClass('has-error');
                    return;
                }

                // 将数据转换为JSON格式的字符串
                var data = JSON.stringify({
                    loginAccount: loginAccount,
                    loginPassword: loginPassword,
                    verifyCode: verifyCode
                });

                // 发起 AJAX 请求进行登录验证
                $.ajax({
                    url: 'http://localhost:8080/user/loginController',
                    method: 'post',
                    data: data,
                    contentType: 'application/json',
                    success: function (result) {
                        if (result.code === 200) {
                            // 登录成功，将token和longToken存储在localStorage中
                            localStorage.setItem('token', result.datas.token);
                            localStorage.setItem('longToken', result.datas.longToken);
                            // 判断用户权限是否有5(后端登录权限)
                            var hasPermission = false;

                            if (result.datas.status === 1) {
                                for (var i = 0; i < result.datas.roles.length; i++) {
                                    var role = result.datas.roles[i];
                                    for (var j = 0; j < role.permissions.length; j++) {
                                        var permission = role.permissions[j];
                                        if (permission.permissionId == 5) {
                                            hasPermission = true;
                                            break;
                                        }
                                    }
                                    if (hasPermission) {
                                        break;
                                    }
                                }

                                if (hasPermission) {
                                    // 跳转到common-index首页
                                    window.location.href = 'common-index.html';
                                } else {
                                    // 提示用户没有权限
                                    alert('您没有权限访问该页面');
                                }
                            } else {
                                alert('该账号已被冻结，请联系管理员解冻');
                            }


                        } else if (result.code == 7001) { // 验证码错误
                            alert(result.msg);
                            $('input[name="checkCode"]').val('');
                            $("#verifyCodeImg").attr('src', 'http://localhost:8080/user/loginController?' + Math.random());

                        } else if (result.code == 7002) { // 密码错误
                            alert(result.msg);
                            $('input[name="checkCode"]').val('');
                            $('input[name="loginPassword"]').val('');
                            $("#verifyCodeImg").attr('src', 'http://localhost:8080/user/loginController?' + Math.random());

                        } else {
                            // 登录失败，显示错误信息
                            alert(result.msg);
                            location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        // 处理请求错误
                        console.error(error);
                        alert("请求失败");
                    }
                });
            })
        });

        $(function () {
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        });
    </script>
</body>

</html>